<template>
	<div>
	<city-header ></city-header>
	<city-search :cities="cities"></city-search>
	<city-list :cities="cities" 
				:hotCities="hotCities"
				:letter="letter"
	></city-list>
	<city-alphabet @change="handleLetterChange" :cities="cities"></city-alphabet>
	</div>
</template>

<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
import axios from 'axios'
export default {
		name:'City',
		data:function(){
			return {
				cities:{},
				hotCities:[],
				letter:''
			}
		},
		components:{
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		methods:{
			getCityInfo(){
				axios.get('/api/city.json').then(this.succ);	
			},
			succ(res){
				res= res.data
				if(res.ret && res.data){
					const data = res.data;
					this.cities = data.cities;
					this.hotCities = data.hotCities;
				}
			},
			handleLetterChange(ch){
				this.letter = ch;
	
			}
		},
		mounted () {
			this.getCityInfo()
		}
	}
</script>

<style></style>